<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../../kq.dev.js"></script>
<script type="text/javascript" src="kq.svg.js"></script>

</head>

<body>
<div id="mydiv"></div>
</body>

<script>
var svg = new $Q.plugIn.Svg({
	width:600,
	height:400
});
//画一个圆形
var circle = svg.addCircle({
	cx:100,
	cy:50,
	r:40,
	stroke:'black',
	"stroke-width":2,
	fill:"red"
},new svg.Animation({
	attributeName:"transform",
	attributeType:"xml",
	type:"translate",
	from:"10",
	to:"100",
	begin:"0s",
	dur:"2s",
	}));
$Q(circle.element).on('click',function(){
	this.setAttribute("cx","200");
	console.log(this);
});

//创建一个矩形
svg.addRect({
	width:300
});
//创建一个椭圆
svg.addEllipse({
	rx:30,
	ry:10
});
//创建一个线条
svg.addLine({
	
});
//创建一个折线
svg.addPolyline({
	point:[
		[0,0],
		[100,200],
		[200,300],
		[300,350]
	],	
});
//创建一个多边形
svg.addPolygon({
	point:[
		[0,0],
		[50,100],
		[100,200],
		[200,300]
	],	
});
var svg2 = new $Q.plugIn.Svg({
	width:100,
	height:100
});
svg2.addRect({
	width:100,
	height:100
});
var svg3 = new $Q.plugIn.Svg({
	width:200,
	height:50
});
svg3.addRect({
	width:200,
	height:50,
	fill:"red"
});
//720*500
svg3.addImage({
	width:200,
	height:100,
	url:"https://res.kuoqps.com/upload/jpg/220919/c64cb36ae960ceaafa6fe042f10c5d53.jpg",
		
});
//svg.addSvg(svg2);
//svg.addSvg(svg3);

document.getElementById("mydiv").appendChild(svg.toElement());
</script>
</html>
